<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小吃分类</title>
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <link rel="stylesheet" type="text/css" href="../static/css/category.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/base.js"></script>
    <script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
</head>

<body>
    <header>
        <div class="container clearfix" id="top">
            <a href="/index"><img class="logo" src="../static/img/logo.png"></a>
            <a class="topbar-item" href="/index">首页</a>
            <a class="topbar-item active" href="/category">小吃分类</a>
            <span th:if="${session.user} != null">
            <a class="topbar-item" href="/my" th:if="${session.user.username!='admin'}">个人中心</a>
            <a class="topbar-item" href="/admin" th:if="${session.user.username=='admin'}">个人中心</a>
            </span>
            <nav th:if="${session.user} == null">
                <a href="/register">注册</a>
                <span>|</span>
                <a href="/login">登录</a>
            </nav>
            <nav th:if="${session.user} != null">
                您好！<span th:text="${session.user.getUsername()}"></span>，<a href="/loginOut">退出</a>
            </nav>
        </div>
    </header>
    <a id="toTop" title="回到顶部"><img src="../static/img/scroll_top1.png"></a>
    <div class="rest-banner">
        <div class="imgsort-wrapper">
            <ul class="clearfix imgsort-content">
                <li class="fl  selected">
                    <a href="#" data-cate="cate_all" class="imgsort-list" title="全部">
                        <span class="imgsort-info">全部</span>
                    </a>
                </li>
                <li class="fl " th:each="category:${categorys}">
                    <a class="imgsort-list" th:title="${category.getCategoryName()}" href="#">
                        <span class="imgsort-info" th:text="${category.getCategoryName()}"></span>
                    </a>
                </li>


            </ul>
        </div>
        <div class="divider"></div>
        <div class="rest-list">
            <ul class="itemlist">
                <table id="allFood">
                    <thead>
                        <tr>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </ul>
        </div>

        <script th:inline="javascript">
            var BaseUrl = '[(${BaseUrl})]';
        $(function() {
            var table;
            allFoodTable();
            function  allFoodTable() {
                table = $("#allFood").DataTable({
                    destroy: true,
                    "lengthChange": false,
                    "processing": true,
                    "deferRender": true,
                    "pageLength": 12,
                    "autoWidth":false,
                    ajax: {
                        url: BaseUrl+"getAllFood",
                    },
                    columns: [
                        { data: 'name',render:function (data,type,full,meta) {
                                var width=full.score/5*72;
                                return "<li class='j-card'><a href='/detail?foodId="+full.id+"'><div class='imgbox'><div class='borderbox'>" +
                                    "<img src='"+full.foodImg+"'/></div></div></a><div class=\"contentbox\"><a href=\"/detail?foodId="+full.id+"\"> " +
                                    "<div class=\"header\"><h4 class=\"title\" title=\""+full.name+"\">"+full.name+"</h4>" +
                                    "</div></a><div class=\"footer\"><div class=\"rank clearfix\">" +
                                    "<span class=\"star-ranking fl\"><span class=\"star-score star\" style=\"width: "+width+"px\"></span></span>" +
                                    "<span class=\"score-num fl\" >"+full.score+"分</span><span class=\"coment-count\">"+full.commentCount+"点评</span></div>" +
                                    "<div class=\"bottom-border\"></div></div></div></li>";
                            } },
                        {
                            data:'category',render:function (data,type,full,meta) {
                                return data;
                            }
                        }
                    ],
                    "language": {
                        "zeroRecords": "没有找到记录",
                        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                        "infoEmpty": "无记录",
                        "infoFiltered": "(从 _MAX_ 条记录过滤)",
                        "paginate": {
                            "previous": "上一页",
                            "next": "下一页"
                        },
                        "search":"搜小吃"
                    },
                });
                table.draw();
                var interval = setInterval(function () {
                    $("tr>td>.j-card:eq(0)").css("margin-top","76px");
                    $("tr>td>.j-card:eq(1)").css("margin-top","52px");
                    $("tr>td>.j-card:eq(2)").css("margin-top","28px");
                    $("tr>td>.j-card:gt(2)").css("margin-top","4px");
                    $(".score-num").text(function () {
                        if($(this).text()=="0分"){
                            return "暂无评分";
                        }
                    })
                },50)
            }

            $.fn.dataTable.ext.search.push(
                function( settings, data, dataIndex ) {
                    var category;
                    $(".imgsort-content li").each(function () {
                        if($(this).hasClass("selected")){
                            category= $(this).find("span").text();
                        }
                    })
                    var thisCategory=data[1];
                    if (category=="全部"){
                        return true;
                    }else{
                        if(category==thisCategory){
                            return true;
                        }else{
                            return false;
                        }
                    }
                }
            );

            $(".imgsort-content li").click(function () {
                allFoodTable()
            })
            sessionStorage.setItem("tabLiNum",0);
            $('.imgsort-content li').click(function() {
                $(this).siblings('li').removeClass('selected');
                $(this).addClass('selected');
            })
        })
        </script>
</body>

</html>